import React from 'react'
import {withRouter} from 'react-router-dom'
import {BackTop, Layout, Button, notification} from 'antd'
import {connect} from 'react-redux'
import Screen from "../../components/Base/Screen";
import Header from "../../components/Header";
import Besider from "../../components/Besider";
import {renderRoutes} from 'react-router-config'
import Api from "../../configs/Api";
import Immutable from 'immutable';
import _ from 'lodash';

const {Content} = Layout;

class Home extends Screen {
    constructor(props) {
        super(props);

        this.state = {
            stageHeight: 0,
        };
    }

    componentDidMount() {
        if (this.props.user.isEmpty()) return this.onReplaceScreen('/login');

        this.onWindowResize();
        window.addEventListener('resize', this.onWindowResize.bind(this));
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.onWindowResize.bind(this));
    }

    onWindowResize() {
        this.setState({
            stageHeight: window.innerHeight - 64,
        });
    }

    render() {
        return (
            <Layout>
                <BackTop visibilityHeight={10}/>
                <Header/>
                <Content style={{paddingTop: '64px'}} id={'scrollContent'}>
                    <Layout style={{minHeight: '100%'}} className="page-box">
                        <Besider/>
                        <Content style={
                            {
                                minHeight: `${this.state.stageHeight}px`,
                                marginLeft: this.props.isMobile ? (
                                    this.props.collapsed ? '0px' : '80px'
                                ) : (
                                    this.props.collapsed ? '80px' : '200px'
                                )
                            }
                        }>
                            {
                                renderRoutes(this.props.route.routes)
                            }
                        </Content>
                    </Layout>
                </Content>
            </Layout>
        )
    }
}

export default withRouter(connect(state => ({
    collapsed: state.root.app.get('collapsed'),
    isMobile: state.root.app.get('isMobile'),
    user: state.root.user,
}))(Home))

